<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择图片或文件</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>
<body>
<style>
    .file_list {
        margin: 0;
        padding: 0 0;
        margin-top: 15px;
        overflow-y: auto;
        display: block;
        height: 445px;
    }

    .file_list ul li {
        display: inline-block;
        height: 150px;
        width: 120px;
        position: relative;
        margin-left: 12px;
        margin-bottom: 12px;
        cursor: pointer;
        border: 1px solid #eee;
        overflow: hidden;
    }

    .file_list ul li:hover {
        background: #f8f8f8;
    }

    .file_list ul li.on {
        background: var(--theme_color);
        color: #fff;
        border: 1px solid var(--theme_color);
    }
    .file_list ul li.on .file_mime{
        color: #fff;
    }

    .file_list ul li > img {
        display: inline-block;
        height: 120px;
        width: 120px;
        border-radius: 5px;
    }
    .file_list ul li .file_mime{
        display: inline-block;
        height: 120px;
        width: 120px;
        border-radius: 5px;
        color: var(--theme_color);
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        line-height: 120px;

    }

    .file_list ul li .title {
        text-align: center;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;

    }
</style>
<div class="view_body">
    <div class="layui-form display_flex" style="padding-left: 15px;padding-top: 15px">
        <div class="design-box table_from_item" style="width: 380px;">
            <div class="layui-input-block  layui-input-group block_margin_left_0">
                <div class="group_input group_prefix">关键词</div>
                <input name="keyword" id="keyword" type="text" placeholder="请输入文件名称或类型检索"
                       autocomplete="off" value="" class="layui-input"></div>
        </div>
        <div>
            <button class="pear-btn pear-btn-primary pear-btn-sm" onclick="init();">
                <i class="ruinuo-icon icon-search"></i>搜索
            </button>
            <button class="pear-btn pear-btn-sm" onclick="cz();"><i
                    class="ruinuo-icon icon-back"></i>重置
            </button>
        </div>
    </div>
    <div class="file_list"></div>
</div>
<script type="text/html" id="view_body_data">
    <ul>
        {{# layui.each(d.rows, function(index, item){ }}
        <li onclick="Choose(this)" data_url="{{item.url}}">
             {{- Getmime(item)}}
            <div class="title" title="{{item.name}}">{{item.name}}</div>
        </li>
        {{# }); }}
    </ul>

</script>
<script>


    let $ = layui.jquery;
    let page = 1;
    let limit = 30;
    let totalPage = 1;
    let UrlData = {};
    layui.use(['form', 'http', 'public', 'engine_form'], function () {
        UrlData = layui.public.GetQueryAll() || {};
        init();
        scroll();
    })

    function init(type = '') {
        if (type == '') {
            page = 1;
        }
        let PostData = {
            page: page,
            limit: limit,
            keyword: $("#keyword").val(),
            file_tag:UrlData['tag'],
        }
        layui.http.SendAjax('/admin/file/lists/', PostData, [], function (res) {
            totalPage = Math.ceil(res.data.total / limit);
            if (type == '') {
                layui.public.ViewTpl(res.data, 'view_body_data', 'file_list');
            } else {
                layui.public.ViewTpl(res.data, 'view_body_data', 'file_list', 1);
            }
        })
    }

    function cz() {
        $("#keyword").val("");
        init();
    }

    function scroll() {
        $(".file_list").unbind("scroll").bind("scroll", function (e) {
            var sum = this.scrollHeight;
            if (sum <= $(this).scrollTop() + $(this).height()) {
                if (totalPage > page) {
                    page++;
                    init(1);
                }
            }
        });
    }

    function Choose(obj) {
        let on = $(obj).attr("calss");
        if (UrlData['file_num'] != 1) {
            $('.file_list .on').removeClass('on')
        }
        if (on == "on") {
            $(obj).removeClass('on')
        } else {
            $(obj).addClass('on')
        }
    }

    function SendForm() {
        let str = '';
        let val = '';
        if (UrlData['file_num'] == 1) {
            val = $("#focus_" + UrlData['elem_id'], window.parent.document).val() || '';
            if (val) {
                val += ',';
            }
        }
        $('.file_list .on').each(function (index, element) {
            str += $(element).attr('data_url') + ',';
        });
        return val + str;
    }

    function Getmime(item)
    {
        let imgHtml='';
        let mime=layui.public.getMine(item.url);
        switch (mime) {
            case "png":
            case "jpg":
            case "jpeg":
            case "gif":
            case "ico":
                imgHtml= '<img src="'+item.url+'">';
                break;
            default:
                imgHtml='<div class="file_mime">' + mime + '</div>';
        }
        return imgHtml;
    }
</script>
</body>
</html>

